@charset "UTF-8";
$ppr: 750px/16/1rem;

html{
    overflow: visible;
}
body.f2{
    background-color: #f2f2f2;
    -webkit-overflow-scrolling:touch;
}
body.fff{
    background-color: #fff;
}
.hide{
    // display: none !important; 
}
.pt88{
    padding-top: 88px/$ppr;
}

.flex-navbar{
    display: -webkit-flex; /* Safari */
    display: flex;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 88px/$ppr;
    background-color: #ffffff;
    border-bottom: 1px solid #e0e0e0;
    padding-left: 30px/$ppr;
    padding-right: 62px/$ppr;
    .left{
        height: 100%;
        line-height: 88px/$ppr;
        font-size: 32px/$ppr;
        text-align: right;
        &>.iconfont{
            color: #212121;
        }
    }
    .center{
        flex: 1;
        font-size: 32px/$ppr;
        color: #212121;
        text-align: center;

    }
}

/* 顶部搜索栏 */
.search-top{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    // height: 157px/$ppr;
    background-color: #ffffff;
    padding-left: 30px/$ppr;
    padding-right: 30px/$ppr;
    &.border-bt{
        border-bottom: 1px solid #dfdfdf;
    }
    .search-bar{
        display: -webkit-flex; /* Safari */
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 88px/$ppr;
        .left,.right{
            height: 100%;
            line-height: 88px/$ppr;
        }
        .left{
            min-width: 120px/$ppr;
            font-size: 0;
            .city{
                flex: 1;
                font-size: 28px/$ppr;
                color: #212121;
                padding-left: 7px/$ppr;
                padding-right: 7px/$ppr;
            }
            .iconfont{
                width: 24px/$ppr;
                font-size: 24px/$ppr;
                color: #999999;
            }
        }
        .center{
            flex: 1;
            height: 56px/$ppr;
            line-height: 56px/$ppr;
            background-color: #f5f5f5;
            border: 1px solid #ebebeb;
            border-radius: 25px/$ppr;
            font-size: 24px/$ppr;
            color: #999999;
            text-align: center;
        }
        .right{
            width: 66px/$ppr;
            text-align: right;
            color: #666666;
            .iconfont{
                width: 42px/$ppr;
                font-size: 32px/$ppr;
                line-height: 88px/$ppr;
                color: #808080;
            }
        }
        &.search1{
            .left{
                min-width: 55px/$ppr;
                .iconfont{
                    font-size: 35px/$ppr;
                    line-height: 88px/$ppr;
                }
            }
            .center{
                position: relative;
                text-align: left;
                padding-left: 30px/$ppr;
                overflow: hidden;
                .search-input{
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    padding-top: 15px/$ppr;
                    padding-left: 66px/$ppr;
                    border: none;
                    background-color: #f5f5f5;
                    font-size: 24px/$ppr;
                    line-height: 24px/$ppr;
                    color: #333;
                    &::-webkit-input-placeholder { /* WebKit browsers */
                        color: #999;
                    }
                    &:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
                        color: #999;
                    }
                    &::-moz-placeholder { /* Mozilla Firefox 19+ */
                        color: #999;
                    }
                    &:-ms-input-placeholder { /* Internet Explorer 10+ */
                        color: #999;
                    }
                }
                .iconfont{
                    position: absolute;
                    top: 0;
                    left: 30px/$ppr;
                    line-height: 56px/$ppr;
                }
            }
            .right{
                width: 84px/$ppr;
            }
        }
    }
    .search-nav{
        height: 69px/$ppr;
        font-size: 0;
        overflow: hidden;
        margin-left: -30px/$ppr;
        margin-right: -30px/$ppr;
        // padding-bottom: 3px/$ppr;
        .search_nav_wrap{
            display: -webkit-flex; /* Safari */
            display: flex;
            align-items: top;
            display: -webkit-box;  /* for uc */  
            height: 75px/$ppr;
            white-space: nowrap;
            overflow-x: scroll;
            overflow-y: hidden;
            .search_nav_item{
                display: inline-block;
                height: 69px/$ppr;
                line-height: 62px/$ppr;
                padding-left: 28px/$ppr;
                padding-right: 28px/$ppr;
                font-size: 24px/$ppr;
                color: #666666;
                text-align: center;
                border-bottom: 3px/$ppr solid transparent;
                white-space: nowrap;
                &.active{
                    font-weight: bold;
                    color: #ff7919;
                    border-bottom: 3px/$ppr solid #ff7919;
                }
                &:first-child{
                    margin-left: 30px/$ppr;
                }
            }
        }
    }
}

/* 内容区 */
.content-wrap{
    width: 100%;
    padding-top: 157px/$ppr;
    padding-bottom: 101px/$ppr;
    &.pt88{
        padding-top: 88px/$ppr;
    }
    /* 搜索结果文字 */
    .show-msg{
        line-height: 20px/$ppr;
        padding: 20px/$ppr 30px/$ppr 0;
        font-size: 20px/$ppr;
        color: #666666;
    }
    .rec-title{
        display: -webkit-flex; /* Safari */
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 98px/$ppr;
        padding-top: 10px/$ppr;
        background-color: #fff;
        .rec-title-t{
            padding-left: 20px/$ppr;
            padding-right: 20px/$ppr;
            font-size: 28px/$ppr;
            color: #666666;
        }
        .h-line{
            flex: 1;
            height: 1px;
            background-color: #e6e6e6;
        }
    }
    /* 搜索结果_没有相关演出 */
    .show-nodata{
        height: 232px/$ppr;
        // background: url(../images/no-data.png) no-repeat center 58px/$ppr;
        background-size: 92px/$ppr 92px/$ppr;
        font-size: 24px/$ppr;
        color: #999999;
        line-height: 70px/$ppr;
        padding-top: 150px/$ppr;
        text-align: center;
    }
    /* banner */
    .swiper-wrap{
        padding: 30px/$ppr 30px/$ppr 10px/$ppr;
        border-radius: 20px/$ppr;
        overflow: hidden;
    }
    .swiper{
        border-radius: 20px/$ppr;
        .swiper-slide{
            .link{
                display: block;
                width: 100%;
                height: 100%;
                overflow: hidden;
                padding-left: 0;
                font-size: 0;
                line-height: 100%;
                img{
                    width: 100%;
                    height: 310px/$ppr;
                }
            }
        }
       .swiper-pagination-bullet{
           width: 12px/$ppr;
           height: 12px/$ppr;
           border-radius: 50%;
           opacity: 0.3;
           background: #fff;
           margin: 0 9px!important;
       }
       .swiper-pagination-bullet-active{
        opacity: 1;
       }
    }
    /* 演出列表区域 */
    .show-wrap{
        margin-top: 20px/$ppr;
        padding-left: 30px/$ppr;
        padding-right: 30px/$ppr;
        background-color: #ffffff;
        .show-items{
            display: -webkit-flex;
            display: flex;
            padding-top: 15px/$ppr;
            padding-bottom: 15px/$ppr;
            border-bottom: 1px solid #e6e6e6;
            &:last-child{
                border-bottom: none;
            }
            .img-box{
                position: relative;
                width:180px/$ppr;
                height: 240px/$ppr;
                border: 1px solid #ebebeb;
                &>img{
                    width: 100%;
                    height: 100%;
                    border: 1px solid transparent;
                }
                .state{
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 68px/$ppr;
                    height: 36px/$ppr;
                    line-height: 36px/$ppr;
                    // background: url(../images/state-bg.png) no-repeat center / 100% 100%;
                    font-size: 20px/$ppr;
                    font-weight: bold;
                    color: #ffffff;
                    padding-left: 10px/$ppr;
                }
                .host{
                    position: absolute;
                    top: 0;
                    right: 0;
                    width: 56px/$ppr;
                    height: 68px/$ppr;
                    line-height: 18px/$ppr;
                    // background: url(../images/host-bg.png) no-repeat center / 100% 100%;
                    font-size: 16px/$ppr;
                    color: #fff;
                    text-align: center;
                    padding-top: 10px/$ppr;
                }
            }
            .detail-box{
                flex: 1;
                padding-left: 30px/$ppr;
                padding-top: 5px/$ppr;
                .ft0{
                    font-size: 0;
                }
                .title{
                    display: -webkit-box;
                    width: 100%;
                    // height: 64px/$ppr;   /* 部分安卓机会有溢出,所以减4 */
                    // height: 60px/$ppr;
                    // line-height: 32px/$ppr;
                    min-height: 40px/$ppr;
                    max-height: 72px/$ppr;
                    line-height: 38px/$ppr;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    font-size: 28px/$ppr;
                    color: #262626;
                    margin-bottom: 25px/$ppr;
                }
                .time,.place{
                    display: -webkit-box;
                    width: 100%;
                    height: 35px/$ppr;
                    line-height: 35px/$ppr;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    -webkit-line-clamp: 1;
                    -webkit-box-orient: vertical;
                    font-size: 22px/$ppr;
                    color: #999999;
                }
                .price{
                    color: #ff7919;
                    margin-top: 25px/$ppr;
                    .fs24{
                        font-size: 24px/$ppr;
                        line-height: 32px/$ppr;
                    }
                    .fs32{
                        font-size: 32px/$ppr;
                        line-height: 32px/$ppr;
                    }
                    .mr8{
                        margin-right: 8px/$ppr;
                    }
                    .ml4{
                        margin-left: 4px/$ppr;
                    }
                    .mr4{
                        margin-right: 4px/$ppr;
                    }
                }
            }
        }
    }
    /* 推荐搜索 */
    .search-recommend{
        background-color: #ffffff; 
        .title{
            padding: 40px/$ppr 30px/$ppr 0;
            font-size: 24px/$ppr;
            line-height: 24px/$ppr;
            color: #999999;
        }
        .hot-word-list{
            display: -webkit-flex; /* Safari */
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            padding:  30px/$ppr 20px/$ppr 0;
            font-size: 0;
            .hot-words{
                height: 60px/$ppr;
                line-height: 60px/$ppr;
                margin: 0 10px/$ppr 20px/$ppr;
                padding-left: 38px/$ppr;
                padding-right: 38px/$ppr;
                background-color: #f7f7f7;
                border-radius: 5px/$ppr; 
                font-size: 26px/$ppr;
                color: #212121;
            }
        }
        .search-list{
            padding: 0 20px/$ppr;
            list-style: none;
            .search-items{
                display: -webkit-flex; /* Safari */
                display: flex;
                justify-content: space-between;
                align-items: center;
                height: 100px/$ppr;
                line-height: 100px/$ppr;
                padding-left: 10px/$ppr;
                border-bottom: 1px solid #e0e0e0;
                font-size: 26px/$ppr;
                color: #333333;
                .iconfont{
                    width: 60px/$ppr;
                    line-height: 100px/$ppr;
                    font-size: 20px/$ppr;
                    color: #c2c2c2;
                    text-align: center;
                }
            }
        }
        .title-clear{
            width: 100%;
            height: 100px/$ppr;
            line-height: 100px/$ppr;
            background-color: #fff;
            font-size: 26px/$ppr;
            color: #999999;
            text-align: center; 
        }
    } 
    /* 演出推荐 */

}

/* 搜索栏底部 */
.index-footer {
    height: 100px/$ppr;
    border-top: 1px solid #e6e6e6;
    z-index: 99;
    
    display: -webkit-flex; /* Safari */
    display: flex;
    justify-content: center;
    align-items: Center;
    .item {
        flex: 1;
        text-align: center;
        font-size: 22px/$ppr;
        color: #333;
        .iconfont-box{
            position: relative;
            width: 43px/$ppr;
            height: 43px/$ppr;
            margin: 0 auto;
            background-position: left top;
            background-repeat: no-repeat;
            background-size: 43px/$ppr 86px/$ppr;
        }
        &.active {
            .txt {
                color: #ff7919;
            }
            .iconfont-box{
                background-position: 0 -43px/$ppr;
            }
        }
        &.mine {
            position: relative;
            .circle {
                display: block;
                position: absolute;
                top: 7px/$ppr;
                right: 90px/$ppr;
                width: 12px/$ppr;
                height: 12px/$ppr;
                border-radius: 50%;
                background: #ff6d66;
            }
        }
    }
}

/* 切换城市 */
.select-area{
    width: 100%;
    min-height: 100%;
    padding-left: 30px/$ppr;
    padding-right: 30px/$ppr;
    background-color: #fff;
    .area-title{
        font-size: 24px/$ppr;
        color: #999999;
        line-height: 24px/$ppr;
        padding-top: 30px/$ppr;
        &.pt40{
            padding-top: 40px/$ppr;
        }
        &.pb20{
            padding-bottom: 20px/$ppr;
        }
    }
    .area-wrap{
        display: -webkit-flex; /* Safari */
        display: flex;
        flex-wrap: wrap;
        // align-items:center;
        margin-left: -15px/$ppr;
        margin-right: -15px/$ppr;
        .area-items{
            width: 210px/$ppr;
            height: 60px/$ppr;
            line-height: 60px/$ppr;
            background-color: #f5f5f5;
            font-size: 26px/$ppr;
            color: #212121;
            text-align: center;
            border-radius: 5px/$ppr;
            // margin: 20px/$ppr 15px/$ppr 0;
            margin: 20px/$ppr 12px/$ppr 0;
            padding-left: 5px/$ppr;
            padding-right: 5px/$ppr;
            overflow: hidden;
            white-space: nowrap; 
            text-overflow: ellipsis;
            &.dis{
                width: 310px/$ppr;
                color: #ff7919;
            }
            .iconfont-reload{
                display: inline-block;
                font-size: 24px/$ppr;
                color: #ff7919;
                margin-left: 6px/$ppr;
                &.active{
                    animation: rotates 1s infinite;
                }
            }
        }
    }
    .area-lists{
        margin-left: -5px/$ppr;
        margin-right: -5px/$ppr;
        .area-Cap{
            display: block;
            height: 50px/$ppr;
            line-height: 50px/$ppr;
            font-size: 24px/$ppr;
            color: #666;
            background-color: #f6f6f6;
            margin-left: -25px/$ppr;
            margin-right: -25px/$ppr;
            padding-left: 30px/$ppr;
        }
        .cap-list{
            .area-items{
                display: block;
                height: 87px/$ppr;
                line-height: 87px/$ppr;
                border-top: 1px solid #e6e6e6;
                font-size: 28px/$ppr;
                color: #333333;
                padding-left: 5px/$ppr;
                &:first-child{
                    border-top: none;
                }
            }
        }
        
    }
}


/* 城市索引 */
.city-index{
    position: fixed;
    top: 200px/$ppr;
    right: 15px/$ppr;
    width: 50px/$ppr;
    overflow-x: hidden; 
    .index-items{
        display: block;
        font-size: 22px/$ppr;
        // font-weight: bold;
        color: #666;
        height: 32px/$ppr;
        line-height: 35px/$ppr;
        text-align: right;
        // padding-right: 10px/$ppr;
        // height: 
    }
}

.city-index-now{
    position: fixed;
    top: 50%;
    left: 50%;
    width: 160px/$ppr;
    height: 160px/$ppr;
    line-height: 160px/$ppr;
    border: 1px solid #e0e0e0;
    border-radius: 8px/$ppr;
    box-shadow: 0 3px/$ppr 5px/$ppr #f2f1f0;
    background-color: #ffffff;
    margin-left: -80px/$ppr;
    margin-top: -80px/$ppr;
    font-size: 66px/$ppr;
    color: #ff7919;
    text-align: center;
    opacity: 0;
    z-index: -1;
    transition: all 0.5s;
    &.active{
        opacity: 1;
        z-index: 100;
    }
}

.popup-bg{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.2);
    z-index: 200;
    &.active{
        display: block;
    }
    .tri{
        position: absolute;
        top: 73px/$ppr;
        right: 42px/$ppr;
        width: 1px/$ppr;
        height: 1px/$ppr;
        border-left: 10px/$ppr solid transparent;
        border-right: 10px/$ppr solid transparent;
        border-bottom: 10px/$ppr solid #fff;
    }
    .popup-content{
        position: absolute;
        top: 82px/$ppr;
        right: 23px/$ppr;
        width: 200px/$ppr;
        background-color: #ffffff;
        border-radius: 8px/$ppr;
        padding: 6px/$ppr 12px/$ppr 6px/$ppr 16px/$ppr;
        .item{
            height: 75px/$ppr;
            line-height: 74px/$ppr;
            padding-left: 30px/$ppr;
            border-bottom: 1px solid #e6e6e6;
            font-size: 24px/$ppr;
            color: #666666;
            .iconfont{
                display: none;
                margin-left: 10px/$ppr;
                color: #ff7919;
                font-weight: bold;
            }
            &.active .iconfont{
                display: inline-block;
            }
            &:last-child{
                border-bottom: 1px solid transparent;
            }
        }
    }

}

